<template>
  <div class="login-container">
      <el-form class="myCard" ref="form" :model="form" :rules="rules" label-width="80px">
    <div class="img">
     <img src="@/assets/logo.595745bd.png" alt="">
   </div>
   <el-form-item  prop='loginName' class="wh1" >
    <span class="el-icon-mobile"></span>
    <el-input  placeholder="请输入账号" v-model='form.loginName' class="ipt"></el-input>
  </el-form-item>
  <el-form-item  prop='password' class="wh">
    <span class="el-icon-lock "></span>
    <el-input  ref="pwipt" :type="inputType" placeholder="请输入密码" v-model='form.password' class="ipt">></el-input>
    <span  :class="inputType==='password'?'el-icon-byj' : 'el-icon-zyj' " @click="changePwd"></span>
  </el-form-item>
  <el-form-item  prop='code' class="wh">
    <!-- `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}` -->
     <span class="element-icons el-icon-yzm"></span>
    <el-input placeholder="请输入验证码" v-model='form.code' class="ipt">></el-input>
   <div class="yanzhen" @click="clickFn">
     <img :src="src" alt="" >
   </div>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit" :loading="loading" class="wh">登录</el-button>
  </el-form-item>
</el-form>

  </div>
</template>

<script>
import { codeApi } from '@/api/user'
export default {
  name: 'DikedePcIndex',

  data () {
    return {
      form: {
        loginName: 'admin',
        password: 'admin',
        code: ''
      },
      inputType: 'password',
      loading: false,
      random: '',
      src: '',
      rules: {
        loginName: [
          {
            required: true, message: '请输入用户名', trigger: 'blur'
          },
          {
            min: 4, max: 10, message: '请输入正确格式的用户名', trigger: 'blur'
          }
        ],
        password: [
          {
            required: true, message: '请输入密码', trigger: 'blur'
          },
          {
            min: 4, max: 10, message: '请输入正确格式的密码', trigger: 'blur'
          }
        ],
        code: [
          {
            required: true, message: '请输入验证码', trigger: 'blur'
          }
        ]
      }

    }
  },
  mounted () {

  },

  methods: {
    async submit () {
      try {
        this.loading = true
        await this.$refs.form.validate()
        console.log('可以调用后端接口了')
        // 触发actions
        await this.$store.dispatch('user/loginAction', {
          loginName: this.form.loginName,
          password: this.form.password,
          code: this.form.code,
          clientToken: this.random,
          loginType: 0
        })
        this.loading = false
        this.$router.push('/')
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    changePwd () {
      this.inputType === 'password' ? this.inputType = 'text' : this.inputType = 'password'
      this.$nextTick(() => {
        this.$refs.pwipt.focus()
      })
    },
    async clickFn () {
      this.random = JSON.stringify(Math.floor(Math.random() * 50))
      const res = await codeApi(this.random)
      console.log(res)
      this.src = window.URL.createObjectURL(res)
    }
  },
  created () {
    this.clickFn()
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  background: url('~@/assets/background.be4fae7d.png')center center no-repeat ;
  width: 100%;
  min-height: 100vh;
  background-size: 100% 100%;
  position: fixed;
  top:0;
  left:0
}
.myCard {
  border-radius: 10px;
  position: absolute;
  width: 518px;
  height: 388px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background-color:#fff;
.img{
 img{
  position: fixed;
  left:215px;
  top:-48px;
   width: 96px;
  height: 96px;
 }
}
.wh1{
  margin-top: 65px;
  position: relative;
}
.el-icon-mobile,.el-icon-yzm{
  position: absolute  ;
  z-index: 99999;
  left:-30px;
  top:20px
}
.el-icon-byj,.el-icon-zyj{
  position: absolute;
right:70px;
top:20px
}
.wh{
  margin-top: 25px;
  position: relative;
}
.el-icon-lock {
   position: absolute  ;
  z-index: 99999;
  left:-30px;
  top:20px
}
::v-deep .el-input__inner{
  width: 420px;
  height: 52px;
  margin-right: 20px;
  margin-left: -35px;
}
::v-deep .el-button{
width: 420px;
  height: 52px;
  margin-right: 20px;
  margin-left: -35px;
  background-color: #667be5;
  color:#fff;

  border: none;
  border-radius: 5px;
}
.yanzhen{
  position: absolute;
  right: 50px;
  top:0;
  width: 130px;
  height: 50px;
}
// .ipt{
//   padding-left: 20px;
// }

}

</style>
